<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

                <!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>
		
		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div>
				<h3 class="text-center text-primary">Bootstrap 代码</h3>
				<ul class="list-unstyled">
					<li>
						Bootstrap 允许您以两种方式显示代码：
					</li>
					<li>
						第一种是 code 标签。内联显示代码。
					</li>
					<li>
						第二种是 pre 标签。代码需要被显示为一个独立的块元素或者代码有多行。
				    </li>
				</ul>
				<hr style="border:4px solid black;">
				<p>
					<code>&lt;header&gt;</code> 作为内联元素被包围。
				</p>
				<p>
					如果需要把代码显示为一个独立的块元素，请使用 pre 标签：
				</p>
				<pre>
				  &lt;article&gt;
				    &lt;h1&gt;Article Heading&lt;/h1&gt;
				  &lt;/article&gt;
				</pre>
			</div>
	
		</div>
		
	</body>
</html>
